<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-card>
          <div id="pie" :style="{width: '100%', height: '800px'}"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
<!--        <el-card>-->
<!--          <div>-->
<!--            <h3>系统公告</h3>-->
<!--          </div>-->
<!--          <el-collapse accordion v-model="active">-->
<!--            <el-collapse-item :name="index" v-for="(item ,index) in notices" :key="item.id">-->
<!--              <template slot="title">-->
<!--                <b>{{ item.title }}</b>-->
<!--                <span style="margin-left: 50px; color: #888">{{ item.time }}</span>-->
<!--              </template>-->
<!--              <div style="padding: 0 20px">{{ item.content }}</div>-->
<!--            </el-collapse-item>-->
<!--          </el-collapse>-->
<!--        </el-card>-->
        <el-card>
          <div id="line" :style="{width: '100%', height: '800px'}"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {getAllReport,getDailyCount} from "@/api/report";
import echarts from "echarts";
import {getUser} from "@/utils/storage";

export default {
  name: "Home",
  data() {
    return {
      notices: [],
      active: 0,
      user: {},
      seriesData :[],
      legendData :[],
      seriesData2 :[],
      xAxisData :[]
    };
  },
  mounted() {
    this.user = getUser()
    // this.load()
    this.drawLine()
  },
  // methods: {
  //   load() {
  //     getAllNotice().then((res) => {
  //       this.notices = res.data;
  //     })
  //   },
  //   drawLine() {
  //     const pieOption = {
  //       title: {text: '分类商品销量统计'},
  //       tooltip: {trigger: 'item'},
  //       legend: {top: '0', left: 'right'},
  //       series: [
  //         {
  //           name: '销量',
  //           type: 'pie',
  //           radius: ['40%', '70%'],
  //           itemStyle: {
  //             borderRadius: 10,
  //             borderColor: '#fff',
  //             borderWidth: 2
  //           },
  //           data: [
  //
  //           ]
  //         }
  //       ]
  //     };
  //     // 基于准备好的dom，初始化echarts实例
  //     let myChart = this.$echarts.init(document.getElementById('pie'))
  //
  //     getAllGoods().then(res => {
  //       let category = Array.from(new Set(res.data.map(v => v.categoryName)))
  //       category.forEach(item => {
  //         pieOption.series[0].data.push({name: item, value: res.data.filter(v => v.categoryName === item).map(v => v.sales).reduce((a,b) => a + b)})
  //       })
  //       console.log(pieOption)
  //       // 绘制图表
  //       myChart.setOption(pieOption);
  //     })
  //   }
  // },
  methods: {
    drawLine() {
      const pieOption = {
        title: {
          text: '销量报表',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          left: 10,
          top: 20,
          bottom: 20,
          data: []
        },

        series: [
          {
            name: '类别',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data:[],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      const lineOption = {
        tooltip: {
          trigger: 'axis',
        },
        title: {
          left: 'center',
          text: '流量报表'
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%']
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 10
          },
          {
            start: 0,
            end: 10
          }
        ],
        series: [
          {
            name: 'Fake Data',
            type: 'line',
            symbol: 'none',
            sampling: 'lttb',
            itemStyle: {
              color: 'rgb(255, 70, 131)'
            },
            // areaStyle: {
            //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //     {
            //       offset: 0,
            //       color: 'rgb(255, 158, 68)'
            //     },
            //     {
            //       offset: 1,
            //       color: 'rgb(255, 70, 131)'
            //     }
            //   ])
            // },
            data: []
          }
        ]
      }
      //基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('pie'))
      getAllReport().then(res => {
        this.seriesData = res.data.map(item =>({
          value: item.shoeSales,
          name: item.shoeName,
        }))
        // console.log(this.seriesData)
        pieOption.series[0].data=this.seriesData
        this.legendData = res.data.map(item => item.shoeName)
        // console.log(this.legendData)
        pieOption.legend.data=this.legendData
        console.log(pieOption)
        myChart.setOption(pieOption);
      })

      let myChart2 = this.$echarts.init(document.getElementById('line'))
      getDailyCount().then(res =>{
        this.seriesData2 = res.data.map(item => item.dailyCount)
        lineOption.series[0].data = this.seriesData2
        this.xAxisData = res.data.map(item => item.date)
        lineOption.xAxis.data = this.xAxisData
        myChart2.setOption(lineOption)
      })

    }
  },
};
</script>

<style scoped>
</style>
